<template>
  <div>
    <div class="menu-box" id="homeIndexHeaderId">
      <!-- active-text-color="#ffd04b" -->
      <div class="img-box">
        <img :src="trayIcon" alt="" />
      </div>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#fff"
      >
        <el-sub-menu :index="item.id" v-for="item in menus" :key="item.id">
          <template #title>{{ item.name }}</template>
          <el-menu-item
            :index="jtem.id"
            v-for="jtem in item.children"
            :key="jtem.id"
            @click="clickMenuItem(jtem.shortcut)"
          >
            <span>{{ jtem.name }}</span>
            <span>{{ jtem.shortcut }}</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
      <div class="operate">
        <span class="operate-item" @click="clickMinimizeWindow">
          <el-icon color="#fff">
            <Minus />
          </el-icon>
        </span>
        <span class="operate-item" @click="clickToggleFullScreen">
          <span v-if="!isFullScreen">
            <svg
              t="1718954044601"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4260"
              width="12"
              height="12"
            >
              <path
                d="M959.72 0H294.216a63.96 63.96 0 0 0-63.96 63.96v127.92H64.28A63.96 63.96 0 0 0 0.32 255.84V959.4a63.96 63.96 0 0 0 63.96 63.96h703.56a63.96 63.96 0 0 0 63.96-63.96V792.465h127.92a63.96 63.96 0 0 0 63.96-63.96V63.96A63.96 63.96 0 0 0 959.72 0zM767.84 728.505V959.4H64.28V255.84h703.56z m189.322 0H831.8V255.84a63.96 63.96 0 0 0-63.96-63.96H294.216V63.96H959.72z"
                p-id="4261"
                fill="#ffffff"
              ></path>
            </svg>
          </span>
          <span v-else>
            <svg
              t="1718954319654"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8620"
              width="12"
              height="12"
            >
              <path
                d="M926.45937303 97.54062697v828.2973677H97.54062697V97.54062697h828.91874606m4.97102697-77.6722963h-838.8608c-39.7682157 0-72.07989097 32.31167525-72.07989097 72.07989096v839.48217837c0 39.7682157 32.31167525 72.07989097 72.07989097 72.07989097h839.48217837c39.7682157 0 72.07989097-32.31167525 72.07989096-72.07989097v-838.8608c0-40.38959408-32.31167525-72.70126933-72.70126933-72.70126933 0.62137837 0 0 0 0 0z"
                p-id="8621"
                fill="#ffffff"
              ></path>
            </svg>
          </span>
        </span>
        <span class="operate-item close-icon" @click="clickCloseWindow">
          <el-icon color="#fff">
            <Close />
          </el-icon>
        </span>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import trayIcon from '@/assets/icons/tray.png'
import renderDrag from '@/utils/drag.js'
import { Minus, Close } from '@element-plus/icons-vue'
const router = useRouter()
onMounted(() => {
  renderDrag('homeIndexHeaderId')
  window.api.apiSwitchToFile((arg) => {
    console.log(arg, 'home------------')
    router.push({ path: '/open_file' })
  })
})
const isFullScreen = ref(false)
const clickMinimizeWindow = () => {
  window.api.apiWindowMinimize()
}
const clickToggleFullScreen = () => {
  isFullScreen.value = !isFullScreen.value
  console.log('-------切换--------')
  console.log(window.api, 'window.api')
  window.api.apiToggleFullScreen()
}
const clickCloseWindow = () => {
  window.api.apiWindowClose()
}
const clickMenuItem = (shortcut) => {
  window.api.apiClickMenu(shortcut)
}
const menus = ref([
  {
    id: '1',
    name: '窗口',
    children: [
      {
        id: '1-1',
        name: '新建窗口',
        shortcut: 'Ctrl+Shift+N'
      },
      {
        id: '1-2',
        name: '关闭窗口',
        shortcut: 'Ctrl+Shift+W'
      }
    ]
  },
  {
    id: '2',
    name: '文件',
    children: [
      {
        id: '2-1',
        name: '打开文件',
        shortcut: 'Ctrl+O'
      },
      {
        id: '2-2',
        name: '打开系统键盘',
        shortcut: 'Ctrl+S+K'
      }
    ]
  }
])
</script>

<style lang="scss" scoped>
.menu-box {
  display: flex;
  background-color: #545c64;
  /* -webkit-app-region: no-drag; */
  .img-box {
    display: flex;
    align-items: center;
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    img {
      width: 22px;
      height: 22px;
    }
  }
  .operate {
    display: flex;
    align-items: center;
    /* padding-right: 15px; */
    .operate-item {
      display: block;
      width: 44px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      /* margin-right: 15px; */
      &:hover {
        background-color: #2d2e2e;
      }
    }
    .close-icon {
      margin-right: 0;
      &:hover {
        background-color: #e84856;
      }
    }
  }
  :deep(.el-sub-menu__icon-arrow) {
    display: none;
  }
  :deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
    border-bottom: none;
  }
  :deep(.el-menu--horizontal.el-menu) {
    border-bottom: none;
  }
  :deep(.el-menu) {
    flex: 1;
    height: 40px !important;
  }
  :deep(.el-sub-menu__title) {
    padding: 0 20px;
    &:hover {
      background-color: #2d2e2e;
      cursor: default;
    }
  }
}
</style>
<style lang="scss">
.el-menu--horizontal .el-menu .el-menu-item {
  display: flex;
  justify-content: space-between;
}
</style>
